<script setup lang="ts">
import type { Props, Emits } from './utils/types'
import ItemVideo from '@/components/ItemVideo/index.vue'

defineOptions({
    name: 'ItemStyle'
})

const $props = withDefaults(defineProps<Props>(), {
    type: 1,
    title: '标题'
})

const $emit = defineEmits<Emits>()

function handleEnterAlbum() {
    $emit('on-click-btn')
}

function handleEnterPractice() {
    if ($props.type == 3) return

    $emit('on-click-practice')
}

</script>

<template>
    <div class="item" :class="{ 'item-type-2': type == 2 }" @click="handleEnterPractice">
        <div class="cover" v-if="item?.type == 'video'">
            <ItemVideo style="border-radius: 5px 5px 0 0; overflow: hidden;" :image="item.image"
                :sample="item.sample" />
            <div class="cover-text-type" :class="{ 'cover-text-type-1': type == 1, 'cover-text-type-2': type == 2 }"
                v-if="type != 3">
                {{ title }}
            </div>
        </div>
        <div v-else class="cover">
            <img v-if="image" :src="image" alt="背景图" :class="{ bug: type == 1 }" />
            <img v-else src="./images/bg.png" alt="背景图" :class="{ bug: type == 1 }" />
            <div class="cover-text-type" :class="{ 'cover-text-type-1': type == 1, 'cover-text-type-2': type == 2 }"
                v-if="type != 3">
                {{ title }}
            </div>
            <div class="cover-text-type-3" v-if="type == 3">
                <h1>{{ title }}</h1>
                <button @click="handleEnterAlbum">进入专辑</button>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.item {
    height: 210px;
    border-radius: 5px;
    overflow: hidden;
    transition: box-shadow .2s;
    cursor: pointer;

    .cover {
        position: relative;
        height: 100%;

        .bug {
            border-radius: 0 0 10px 10px;
        }

        >img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .cover-text-type-3 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: default;

            h1 {
                font-size: 24px;
                font-weight: 700;
                color: rgba(255, 255, 255, 1);
            }

            button {
                display: none;
                margin-top: 10px;
                border: 1px solid #ffffff;
                background-color: transparent;
                color: #ffffff;
                padding: 0 8px;
                border-radius: 5px;
                font-size: 13px;
                line-height: 28px;
                cursor: pointer;
            }

            &:hover {
                button {
                    display: block;
                }
            }
        }

        .cover-text-type-2 {
            box-sizing: border-box;
            font-size: 14px;
            color: rgba(16, 16, 16, .5);
            background-color: rgba(255, 255, 255, 1);
            text-align: center;
            border-top: none;
            padding-left: 10px;
            border: none;
            text-align: left;
            font-family: 'SOURCEHANSANSCN-LIGHT';
        }

        .cover-text-type-1 {
            box-sizing: border-box;
            font-size: 14px;
            color: rgba(16, 16, 16, .5);
            background-color: rgba(255, 255, 255, 1);
            text-align: center;
            border: 1px solid #e3e3e3;
            border-radius: 0 0 5px 5px;
            border-top: none;
            padding-left: 5px;
        }

        .cover-text-type {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 45px;
            line-height: 45px;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

.item-type-2 {
    border-radius: 0;
}

.item-small {
    height: 165px;
}
</style>